<template>
  <div class="panel">
    <div class="panel__header">
      <div class="panel__block top-0"/>
      <div class="panel__block bottom-0"/>
      <div class="panel__title">{{ title }}</div>
      <img class="h-full" src="./title-decoration.png"/>
    </div>

    <div class="panel__body"
      :style="{background: bgDirection}"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'AppPanel',
  props: {
    title: {
      type: String,
    },
    direction: {
      type: String,
      default: 'left',
    },
  },
  computed: {
    bgDirection() {
      if (this.direction === 'right') {
        return `linear-gradient(90deg, rgba(25,30,42,0) 0%, rgba(25,30,42,0.59) 42%, #191E2A 100%)`;
      }

      return `linear-gradient(93deg, #191e2a 0%, rgba(25, 30, 42, 0.59) 58%, rgba(25, 30, 42, 0) 100%)`;
    },
  },
});
</script>

<style scoped>
.panel {
  @apply text-[#E8E8E8] overflow-hidden;
  @apply flex flex-col;
  @apply border border-solid border-[#00ABFF4C];

  .panel__header {
    @apply h-7 relative flex items-center gap-x-[7px];
    background: linear-gradient(90deg, #33617B 0%, rgba(58, 68, 83, 0) 100%);

    .panel__block {
      @apply h-0.5 w-[7px] absolute left-0 bg-[#00ABFF] rounded-r-sm;
    }

    .panel__title {
      @apply pl-4 text-white text-lg;
    }
  }

  .panel__body {
    @apply flex-1 p-4;
  }
}
</style>
